import React, { useState, useEffect } from "react";
import { ImageUploader, Avatar } from "antd-mobile";
import "./index.scss";
import Cloud from "leancloud-storage";
import { userUpdate } from "@/api/user";
import { useUserStore } from "@/store/user";
type Props = {};
//1. 将本地资源对象转换为base64编码
const getBase64 = (img: File) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      resolve(reader.result as string);
    });
    reader.readAsDataURL(img);
  });
};
export default function ImgUpload({}: Props) {
  const [avatar, setAvatar] = useState<string>("");
  const { userInfo, updateInfo } = useUserStore((state) => state);
  useEffect(() => {
    if (userInfo && userInfo.avatar) {
      setAvatar(userInfo.avatar);
    }
  }, []);
  const handleUpload: any = async (file: File) => {
    // console.log(file);
    // 2. 获取文件资源的base64编码
    let base64 = await getBase64(file);
    // 3. 构建LeanCloud资源
    let res: any = await new Cloud.File("client.png", { base64 }).save();
    let { url } = res.attributes;
    console.log("图片路径", url);
    setAvatar(url); // 4. 设置头像预览
    let { objectId, sessionToken } = userInfo!;
    userUpdate(objectId, sessionToken, { avatar: url }).then((res) => {
      userInfo!.avatar = url; //替换状态机中的头像
      updateInfo(userInfo!);
    });
    return {
      url,
    };
  };
  return (
    <div>
      <ImageUploader upload={handleUpload}>
        <Avatar className="avatar" src={avatar} />
      </ImageUploader>
    </div>
  );
}
